<template>
    <div>
        <van-nav-bar title="我的订单" left-arrow @click-left="fun">
            <template #right>
                <van-icon name="ellipsis" size="26" />
            </template>
        </van-nav-bar>
        <div class="box">
            <van-icon name="search" size="20" /> 搜索我的订单
        </div>
        <van-tabs v-model="active">
            <van-tab title="全部"></van-tab>
            <van-tab title="待付款"></van-tab>
            <van-tab title="待收货"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs>
        <div class="box1">
            <div class="box2">
                <img src="https://img12.360buyimg.com/img/s220x220_jfs/t1/109425/11/5810/36261/5e413d09E382bfa26/d29c1a60c5f03453.png"
                    alt="">
                <span>您暂时没有相关订单！</span>
            </div>

        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            active: 2,
        };
    },
    methods:{
        fun(){
            this.$router.back()
        }
    }

}
</script>

<style scoped>
.box {
    height: 29px;
    width: 94%;
    margin: 10px auto;
    border-radius: 20px;
    border: 1px solid #EEE;
    line-height: 29px;
    font-size: 14px;
    color: #999;
    text-indent: 0.2em;
    display: flex;
    align-items: center;
}

.box1 {
    height: 226px;
    background: #f5f5f5;
}

.box2 {
    width: 180px;
    height: 154px;
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #CCC;
}

.box2 img {
    width: 90px;
    margin: auto;
}
</style>